<template>
    <!-- 我的地址 -->
    <view class="purchaseDetailContainer">
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'我的地址'">
        </cunstom_navigation_bar>
        <view class="addAddr" @tap="jumpTo(item,'add')">
            新增地址 >
        </view>
        <view class="addrList">
            <view class="addrBox" v-for="(item,index) in addressList" >
                <view class="left" @tap="selectAddress(item)">
                    <view class="line1">
                        <view class="label">{{item.tip}}</view>
                        <view>{{item.address}}</view>
                    </view>
                    <view class="line2">
                        <view class="txt">{{item.realname}}</view>
                        <view class="txt gender">先生</view>
                        <view class="txt">{{item.mobile}}</view>
                    </view>
                </view>
                <view class="right" @tap="jumpTo(item,'edit')">
                    <image src="https://visionmpapi.jiuerjindi.com/upload/mp/myAddress/edit.png"></image>
                </view>
            </view>
        </view>



    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {

                addrListData: 3, 
                mallProductId: '',
                selectedOption: {},
                openId: "", 
                imgDomain: "", 
                propStyles: {
                    // iconSrc: "../https://visionmpapi.jiuerjindi.com/upload/mp/ucenter/backIcon.png",
                    iconSrc: "black",
                    // bgColor: '#FECF01', 
                },
				addressList: []

            };
        },
        computed: {

        },
        methods: {
            jumpTo(item, type) {
				if(type=="add"){
					uni.navigateTo({
					    url: "/page_editAddress/editAddress?type=add",
					})
				}else{
					let str = JSON.stringify(item);
					uni.navigateTo({
					    url: "/page_editAddress/editAddress?type=edit&obj="+str,
					})
				}
				
            },
			selectAddress(item){
				uni.setStorageSync('addressSelect', item); // 存到缓存中
				uni.navigateBack ({
                    url: `/page_bookDetail/bookDetail`,
                })
			},
            goback() {
                console.log("回去");
                uni.navigateBack();
            },
			//
			getAddressList(){ 
				let params = {};
				util.request(api.addressList, params
				  , 'GET', 'application/json').then(res => {
				    if (res.code == 200) {
				      this.addressList = res.data.data;
				    }
				  }).catch((err) => {
				    console.log('err', err)
				
				  }); 
			}

        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },



        onLoad: function (option) {

            //option为object类型，会序列化上个页面传递的参数
            // console.log('onload~~~购买页面', option);
            // this.mallProductId = option.mallProductId;
            // this.skuId = option.skuId
            // this.quantity = Number(option.quantity)
            // this.getOrderAddress(option.id)
            // this.startDate = this.getDate()


            this.imgDomain = process.env.VUE_APP_BASE_URL;

            // "addrId": 13
			this.getAddressList();


        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }

    .addAddr {
        width: 752rpx;
        height: 126rpx;
        background: #FFFFFD;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #D93F11;
        text-align: center;
        line-height: 126rpx;
        margin-top: 30rpx;
        margin-bottom: 24rpx;

    }

    .addrList {
        width: 750rpx;

        background: #F8F8F8;
        border-radius: 60rpx 60rpx 60rpx 60rpx;
        padding: 0rpx 28rpx;

        .addrBox {
            display: flex;
            width: 100%;
            height: 230rpx;
            border-bottom: 6rpx dotted #ccc;
            align-items: center;
            justify-content: space-between;
            .left {
                width: 622rpx;
                .line1 {
                    display: flex;
                    margin-bottom: 20rpx;
                    .label {
                        padding: 0rpx 18rpx;
                        font-size: 20rpx;
                        color: #D93F11;
                        height: 34rpx;
                        background: rgba(217, 63, 17, 0.1);
                        border-radius: 10rpx 10rpx 10rpx 10rpx;
                        text-align: center;
                        line-height: 34rpx;
                    }
                }

                .line2 {
                    align-items: center;
                    display: flex;
                    .txt {
                        font-size: 28rpx;
                        color: rgba(51, 51, 51, 0.6);
                    }
                    .gender{
                        margin: 0rpx 52rpx 0rpx 30rpx;
                    }
                }
            }
            .right{
                image{
                    width: 30rpx;
                    height: 32rpx;
                }
            }

        }
    }





    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }
</style>